<template >
    <div>
       <screen height="75px" lineHeight="75px">
           <div class="screen">
            <input type="text" v-model="value" placeholder="请输入搜索内容">
            <div class="mg">
              <btn>
                <el-button @click="Query">查询</el-button>
                <el-button @click="Reset">重置</el-button>
              </btn>
            </div>
           </div>
       </screen>
    </div>
</template>
<script>
 import screen from "@/components/screen"
import btn from "@/components/btn"

    export default {
            components:{
                screen,
                btn
            },
            data(){
                return{
                    value:""
                }
            },
            methods:{
                Query(){
                        this.$emit("Query",this.value)
                },
                Reset(){
                    this.$emit("Reset")
                }
            }
    }
</script>
<style scoped>
 input {
     width: 300px;
  height: 30px;
  background: none;
  outline-color: none;
  border: none;
  border: 1px solid #fff;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  margin-left: 30px;
}
.screen {
   display: flex;
   align-items:center; 
}
.mg {
    margin-left: 45px;
}
</style>